<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顾客信息</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="cont">
        <div class="content">
            <h2>顾客信息</h2>
            <div class="info1">
                <p class="name">姓名</p>
                <p><input type="text" placeholder="请填入您的姓名"></p>
                <p class="phone">手机号</p>
                <p><input type="text" placeholder="请填入您的手机号码"></p>
                <p class="Cstore">选门店服务</p>
                <p><p class="chooseS">请选择您需要的门店</p></p>
            </div>
            <div>
                <p class="declare">声明：</p>
                <p class="declareC">您填写的信息仅用于方便我们识别您的身份，我们不会透露、散播、泄漏、出售您的个人信息给第三方</p>
            </div>
            <div class="ensure">我填好了</div>
        </div>
        <div class="shadow">
            <div class="area">
                <div class="close"><img src="img/close.png" /></div>
                <h4>所在地区</h4>
                <div class="diqu"><h3 class="province">省</h3><h3 class="city">市</h3><h3 class="store">门店</h3></div>
                <ul class="wrap"></ul>
            </div>
        </div>
        <div class="bottom"><img src="img/top.png" /></div>
    </div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/index.js"></script>
<script>
    var pro,city,store;
    $(".chooseS").on("click",function(){     
        $(".shadow").css("display","block");
        $(".province").css("color","#ff9340");
        $(".province").css("border-bottom","2px solid #ff9340");
        $(".city").css("color","#454545");
        $(".city").css("border","none");
        $(".store").css("color","#454545");
        $(".store").css("border","none");
        chooseProvince(data);
    });
    $(".close").on("click",function(){
        $(".shadow").css("display","none");   
    }); 
    var str = "";
    var str1 = "";
    var str2 = "";
    var index,index1,index2;
    var cities,areas;

    $(".province").on("click",function(){
        $(".province").text("请选择");
        $(".province").css("color","#ff9340");
        $(".province").css("border-bottom","2px solid #ff9340");
        $(".city").css("color","#454545");
        $(".city").css("border","none");
        $(".store").css("color","#454545");
        $(".store").css("border","none");
        chooseProvince(data);
    });
    function chooseProvince(data){  
        for(var i = 0; i < data.length; i++){
            str += "<li>"+ data[i].name +"</li>";
        }
        $(".wrap").html(str);
        $("li").on("click",function(){  //省
            index = $(this).index();
            $(this).css("color","#ff9340");
            $(this).siblings("li").css("color","#454545");
            $(".province").text($(this).text());
            pro = $(this).text();
            cities = data[index].cities; 
            str1 = "";
            for(var j = 0; j < cities.length; j++){
                str1 += "<li>"+ cities[j].name +"</li>";
            }
        });
    }
    $(".city").on("click",function(){
        $(".city").text("请选择");
        $(".province").css("color","#454545");
        $(".province").css("border","none");
        $(".city").css("color","#ff9340");
        $(".city").css("border-bottom","2px solid #ff9340");
        $(".store").css("color","#454545");
        $(".store").css("border","none");
        chooseCity(cities);
    });
    function chooseCity(cities){
        $(".wrap").html(str1);
        $("li").on("click",function(){    //市
            index1 = $(this).index();
            $(this).css("color","#ff9340");
            $(this).siblings("li").css("color","#454545");
            $(".city").text($(this).text());
            city = $(this).text();
            areas = cities[index1].areas;
            str2 = "";
            for(var m = 0; m < areas.length; m++){
                for(var k = 0; k < areas[m].stores.length; k++){
                    str2 += "<li>"+ areas[m].stores[k].name +"</li>";
                }
            }       
        });
    }
    $(".store").on("click",function(){
        $(".store").text("请选择");
        $(".province").css("color","#454545");
        $(".province").css("border","none");
        $(".city").css("color","#454545");
        $(".city").css("border","none");
        $(".store").css("color","#ff9340");
        $(".store").css("border-bottom","2px solid #ff9340");
        chooseStore(areas);   
    });
    function chooseStore(areas){
        $(".wrap").html(str2);
        $("li").on("click",function(){    //门店       
            $(".store").text($(this).text());
            store = $(this).text();
            $(this).css("color","#ff9340");
            $(this).siblings("li").css("color","#454545");
            $(".chooseS").empty();
            $(".chooseS").text(pro + "," + city + ","+store);
        });
    }
</script>
</html>